<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
            #box{width: 160px; height: 160px; position: absolute; left: 40%; top: 200px; background: #3780b1;
    border: 10px solid #00aaff; box-sizing: border-box;}
        </style>
	</head>
	<body>
        <div id="box"></div>
        <script type="text/javascript">
			//页面加载完毕后执行页面右边的函数  
			window.onload=function (){
				//通过ID找到元素 并且将它赋值给 变量oBox 
				var oBox=document.getElementById('box');
				//声明X 代表以后要存储的数据类型是字符串 Y同上
				var X='';
				var Y='';
				//当鼠标点击盒子的时候触发 执行右边的函数   ev形参  向浏览器返回当前值 FireFox火狐 Chrome谷歌默认都是有一个值传进来的
				oBox.onmousedown=function (ev){
					//兼容IE和FireFox Chrome 只要一个为真就可以执行
					var iEvent=ev || event;
					//当前盒子的宽度赋值给W
					var W=oBox.offsetWidth;
					//当前盒子的宽度赋值给H
					var H=oBox.offsetHeight;
					//当前鼠标在盒子的横坐标赋值给disX
					var disX=iEvent.clientX;
					//当前鼠标在盒子的纵坐标赋值给disY
					var disY=iEvent.clientY;
					//将盒子的鼠标点击时的距离左边的距离和盒子的宽度总和 赋值给disW
					var disxW=oBox.offsetLeft+W;
					//将盒子的鼠标点击时的距离头部的距离和盒子的高度总和 赋值给dis
                    var disyH=oBox.offsetTop+H;
                    
                    console.log('当前盒子的宽度: '+W+' 当前盒子的高度: '+W)
                    console.log('当前鼠标在盒子的横坐标: '+disX+' 当前鼠标在盒子的纵坐标: '+disY)
					
					//这是判断是否当前点击的是盒子的四周
					//当盒子当前点击X轴的值大于 盒子的距离左边的值加盒子自身的宽度减去10像素时  就是表示已经点击到了盒子的右边框
					if(iEvent.clientX>oBox.offsetLeft+oBox.offsetWidth-10){
                        console.log('碰到了盒子的右边！');
						//赋予上面X的值这时等于right  好用于下面的对比
						X='right';
                        oBox.style.cursor='e-resize';
                        document.onmousemove=function (ev){
                            var iEvent=ev || event;
                                 //当当前的鼠标值减去之前获取的鼠标值为负数 那么正数加负数是变小
                                oBox.style.width=W+(iEvent.clientX-disX)+'px';
                        }
					}
					//当盒子当前点击X轴的值小于 盒子的距离左边的值10像素时  就是表示已经点击到了盒子的左边框 
					else if(iEvent.clientX<oBox.offsetLeft+10){
						console.log('碰到了盒子的左边！');
						//赋予上面X的值这时等于left  好用于下面的对比
						X='left';
                        oBox.style.cursor='e-resize';
                        document.onmousemove=function (ev){
                            var iEvent=ev || event;
                            oBox.style.width=W-(iEvent.clientX-disX)+'px';
						    oBox.style.left=disxW-oBox.offsetWidth+'px';
                        }
					}
					//底端判断和顶部判断同上
					else if(iEvent.clientY>oBox.offsetTop+oBox.offsetHeight-10){
						console.log('你碰到了盒子的底部！');
						Y='bottom';
                        oBox.style.cursor='s-resize';
                        document.onmousemove=function (ev){
                            var iEvent=ev || event; //当当前的鼠标值减去之前获取的鼠标值为正数 那么正数加正数是增大
                            oBox.style.height=H+(iEvent.clientY-disY)+'px';
                        }
					}
					else if(iEvent.clientY<oBox.offsetTop+10){
						console.log('你碰到了盒子的顶部！');
						Y='top';
                        oBox.style.cursor='s-resize';
                        document.onmousemove=function (ev){
                            var iEvent=ev || event; //当当前的鼠标值减去之前获取的鼠标值为正数 那么正数加正数是增大
							oBox.style.height=H-(iEvent.clientY-disY)+'px';
							oBox.style.top=disyH-oBox.offsetHeight+'px';
                        }
                    }else if(oBox.offsetTop+oBox.offsetHeight-10<iEvent.clientY<oBox.offsetTop+10||oBox.offsetLeft+oBox.offsetWidth-10<iEvent.clientX<oBox.offsetLeft+10){
                       
                            var disX=iEvent.clientX-oBox.offsetLeft;
                            var disY=iEvent.clientY-oBox.offsetTop;

                            document.onmousemove=function(ev){
                            var l=ev.clientX-disX
                            var t=ev.clientY-disY

                            console.log("left: "+l+' top: '+t)

                            oBox.style.left=l+'px';
                            oBox.style.top=t+'px';
                        }
                    }
					
				
					//当拖动结束后 我们需要释放鼠标 添加鼠标按下松开事件 onmouseup 让鼠标点击不松 的事件为空 让鼠标每移动
					document.onmouseup=function (){
						document.onmousedown=null;
						document.onmousemove=null;//一像素的触发的事件为空 
					}
				};
 
			};
		</script>
	</body>
</html>